<script type="text/javascript">
	var tab = document.getElementById("home");
	tab.style.background = "#1D5377";
	tab.style.color = "#FFFFFF";

	function showContactUs(){
		document.getElementById("screen").style.display = "block";
		document.getElementById("contactus").style.display = "block";
	}
	function hideContactUs(){
		document.getElementById("screen").style.display = "none";
		document.getElementById("contactus").style.display = "none";
	}
	function showTerms(){
		document.getElementById("screen").style.display = "block";
		document.getElementById("terms").style.display = "block";
	}
	function hideTerms(){
		document.getElementById("screen").style.display = "none";
		document.getElementById("terms").style.display = "none";
	}
</script>
<script>
    $(function(){
      $("#slides").slidesjs({
        width: 940,
        height: 528
      });
    });
  </script>

<!-- your jQuery version -->
<script type="text/javascript" src="../js/jquery-2.0.2.js" ></script>

<!-- your μslider version -->
<script type="text/javascript" src="../js/jquery.muslider-2.0.min.js" ></script>

<div class="index_area">
	<div class="caption_area">
		
	<!--
		<div id="caption" class="caption_box">
			<div id="banner1" class="banner1">Manage SMS and missed calls</div>
			<div id="banner2" class="banner2">Manage contacts</div>
			<div id="banner3" class="banner3">Manage calls/sms forwarding</div>
			<div id="banner1" class="banner1">Tracking / Remote Security</div>
			<div id="phone" class="phone"><img src="../images/phone.png"/></div>
		</div>
		<div id="get_started" class="get_started">
			<div>
				<p>
					Get Started
				</p>
			</div>
			<div>
				<p>
					Download the
				</p>
			</div>
			<div>
				<p>
					App to Register
				</p>
			</div>
			<div id="download_button" class="download_button">
				<p><a href="#">DOWNLOAD THE APP</a></p>
			</div>
		</div>
		-->
	</div>
	<div class="below_caption_area">
		<div id="below_caption_box" class="below_caption_box">
		  
			
			<!-- define a container for the slides -->
			<!-- choose an ID for your container (in our example id="my_slider") it must have class "slider" -->

			<div id="my_slider" class="slider" >

				<!-- every slide must have class "slide" -->
				<!-- the content can be an image -->
	
				<div class="slide">
					<div class="left_slide">
						<h1>SMS ANYWHERE!!!</h1><br>
						<h2>View/Reply your messages</h2>
						<h3>With Woogie Web Mobile, you may view your SMS as they arrive. You can also reply to these messages, as well as sending new messages to people on your contact list.<br>
						You may also view your phone calls as they arrive.</h3>
						<h2>Really?</h2>
						<h3>Yeah! You can now view, reply or send a message using your browser, no matter where your phone is. You can also view any incoming calls directly before going to your phone.</h3>
					</div>
					<div class="right_slide">
						<img src="../images/services.png" alt="alternative text" title="Access your SMS via the WEB" />
					</div>
				</div>
	
				<!-- or the content can be a text -->
	
				<div class="slide">
					<div class="left_slide">
						<h1>CONTACTS ANYWHERE!!!</h1><br>
						<h2>View your Contact List</h2>
						<h3>Your Contact List is accessible via Woogie Web Mobile anytime, anywhere.</h3>
						<h2>Then What?</h2>
						<h3>With your contacts anywhere, you may access them even when your mobile device is not functional. Your contact list is now made available via the WEB.</h3>
					</div>
					<div class="right_slide">
						<img src="../images/contacts.png" alt="alternative text" title="Access your Contact List via the WEB" />
					</div>
				</div>
	
				<!-- or a text + an image -->
	
				<div class="slide">
					<div class="left_slide">
						<h1>MOBILE ANYWHERE!!!</h1><br>
						<h2>Locate/Secure Your Device Remotely</h2>
						<h3>Via Woogie Mobile, you may access your phone's GPS location in order to precisely obtain where your device is located at a given time.
						<br>You may also activate a remote security option which will block/wipe you phone's content in case of emergency.</h3>
						<h2>What For?</h2>
						<h3>In case you loose your mobile device, from Woogie Mobile, you can now track it instantly; be it: you forgot it at home or at your friend's.</h3>
					</div>
					<div class="right_slide">
						<img src="../images/compass.png" alt="alternative text" title="Remotely locate and secure your device" />
					</div>
				</div>
			</div>

			<!-- buttons for slide navigation control -->
			<!-- the container must have class "navslide" -->

			<div class="navslide">
				<p>
					<!-- it is important that the control buttons have these classes -->
		
					<span class="prev"><img class="nav_control" src="../images/previous.png" alt="prev" title="prev" /></span>
					<!--<span class="start"><img class="nav_control" src="../images/play.png" alt="start" title="start" /></span>
					<span class="stop"><img class="nav_control" src="../images/pause.png" alt="stop" title="stop" /></span>-->
					<span class="next"><img class="nav_control" src="../images/next.png" alt="next" title="next" /></span>
				</p>
				<!-- note: instead of images you can simply use words inside the <span> element -->
			</div>
				
			<script type="text/javascript">
				$(document).ready(function(){
					$("#my_slider").muslider();
					$("#my_slider").muslider({
						"animation_start": "auto",
						"animation_interval": 12000
					});
				});
			</script>
		</div>
		<!--
		<div id="below_caption_box" class="below_caption_box">
			<div id="index_left" class="index_left">
				<div id="security_img" class="security_img">
					<img src="../images/shield.png"/>
				</div>
				<div id="security_content" class="security_content">
					<div class="security_title"><p>Security</p></div>
					<hr />
					Security I'm a paragraph. Click here to add your own text and edit me. I’m a great place for you to tell a story and let your users know a little more about you.
				</div>
			</div>
			<div class="index_left_line"><img src="../images/leftLine.png"/></div>
			<div id="index_center" class="index_center">
				<div id="services_img" class="services_img">
					<img src="../images/services.png"/>
				</div>
				<div id="services_content" class="services_content">
					<div class="services_title"><p>Manage Phone Services</p></div>
					<hr />
					Manage I'm a paragraph. Click here to add your own text and edit me. I’m a great place for you to tell a story and let your users know a little more about you.
				</div>
			</div>
			<div class="index_right_line"><img src="../images/rightLine.png"/></div>
			<div id="index_right" class="index_right">
				<div id="tracking_img" class="tracking_img">
					<img src="../images/compass.png"/>
				</div>
				<div id="tracking_content" class="tracking_content">
					<div class="tracking_title"><p>Tracking</p></div>
					<hr />
					Tracking I'm a paragraph. Click here to add your own text and edit me. I’m a great place for you to tell a story and let your users know a little more about you.
				</div>
			</div>
		</div>
		-->
	</div>
</div>
